<template>
  <div id="app">
    <div class="navbar">
      <div class="navbar-brand">
        <img src="@/assets/BUPT.png" :style="{ width: imageWidth + 'px', height: imageHeight + 'px' }">
      </div>
      <div class="navbar-buttons">
        <el-button type="primary" @click="goToUrlibrain">iBrain计算</el-button>
        <el-button type="success" @click="goToUrlmmse">电子量表计算</el-button>
        <el-button type="danger" @click="goToUrldata">数据管理系统</el-button>
      </div>
    </div>

    <div class="content">
      <h1 class="title">智能医学云计算系统</h1>
      <p class="description">
        请开始您的计算吧！
      </p>
      <el-row :gutter="20" class="button-container">
        <el-col :span="8">
          <el-button type="primary" @click="goToUrlibrain">开始iBrain计算</el-button>
        </el-col>
        <el-col :span="8">
          <el-button type="success" @click="goToUrlmmse">开始电子量表计算</el-button>
        </el-col>
        <el-col :span="8">
          <el-button type="danger" @click="goToUrldata">进入数据管理系统</el-button>
        </el-col>
      </el-row>
    </div>

    <div class="footer">
      <p>© 2024 北京邮电大学脑认知与智能医学研究中心 版权所有. All Rights Reserved.</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      imageWidth: 100, // 更改大小使其适合导航栏
      imageHeight: 100 // 更改大小使其适合导航栏
    };
  },
  methods: {
    goToUrlibrain() {
      this.$router.push('/iBrain');
    },
    goToUrlmmse() {
      // this.$router.push('/MMSE');
      window.location.href = 'https://ibrain.bupt.edu.cn/scale';
    },
    goToUrldata() {
      window.location.href = 'http://headdb.bupt.edu.cn/LsudJSBixm.php';
    }
  }
};
</script>

<style scoped>
#app {
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #65696e; /* 使用类似Bootstrap的主题色 */
  padding: 10px 20px;
  color: white;
}

.navbar-brand img {
  max-width: 100%;
  max-height: 100%;
}

.navbar-buttons {
  display: flex;
  gap: 10px;
}

.content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
  text-align: center;
  padding: 20px;
  color: white;
}

.title {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.description {
  font-size: 1.25rem;
  margin-bottom: 30px;
}

.button-container {
  max-width: 800px;
  width: 100%;
}

.footer {
  text-align: center;
  background-color: #65696e;
  color: white;
  padding: 10px 0;
  font-size: 1rem;
}
</style>
